import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import toNative from '@/utils/toNative'
import type { FormItemDto } from '../types'
import TableRender, { type TableRenderColumnTypes } from '@/render/TableRender'
import type { VxeGridProps, VxeTableDataRow } from 'vxe-table'
import type { FormDataDto } from './FormTable'
import { OccupationLevelCnEnum } from '@/const/enum'
import type { AnyObject } from 'ant-design-vue/es/_util/type'
import type { InsureEnsurePlanDto } from '@/api/insureEnsurePlan/types'

@Component
export class CustomInsurancePlanTable extends TableRender {
    noTablePadding = true
    @Prop() formData?: FormItemDto
    @Prop() modelValue?: string
    tableColumnConfigOld = () => [] as TableRenderColumnTypes<VxeTableDataRow>
    
    tableData = [] as AnyObject[]
    @Emit('update:modelValue')
    emitUpdate() {
        return this.tableData
    }
    
    @Watch('modelValue', { immediate: true, deep: true })
    handleWatchShow(newval: InsureEnsurePlanDto[]) {

        console.log(9000000, newval)
        // this.tagList = newval ? [...newval] : []
        if (!newval?.length) {
            this.tableData = [
                {
                    dangerLevel: OccupationLevelCnEnum['1-3类'],
                    monthFee: '',
                    dailyFee: ''
                },
                {
                    dangerLevel: OccupationLevelCnEnum['4类'],
                    monthFee: '',
                    dailyFee: ''
                },
                {
                    dangerLevel: OccupationLevelCnEnum['5类'],
                    monthFee: '',
                    dailyFee: ''
                },
                {
                    dangerLevel: OccupationLevelCnEnum['6类'],
                    monthFee: '',
                    dailyFee: ''
                }
            ]
        } else {
            this.tableData = newval
        }
    }

    @Watch('formData', { immediate: true })
    handleWatchFormData(newval: FormItemDto) {
        this.tableColumnConfigOld = () => [...newval.params.tableColumnConfig]
        // this.tableData = [...newval.params.tableData]
    }

    @Watch('tableData', { deep: true })
    handleWatchTableData() {
        this.emitUpdate()
    }

    tableConfig() { 
        const obj = {
            editConfig: {
                trigger: 'click',
                mode: 'cell',
                showIcon: false,
                showAsterisk:true,
                beforeEditMethod: ({row}) => {
                    return !this.formData?.readonly
                }
            },
            ...super.tableConfig() 
        } as VxeGridProps
        return obj
    }
    onLoadData(page: number, size: number) {
        return this.tableData
    }
    
    render() { 
        return (
            <div class="mt-10">
                { this.renderTable() }
            </div>
        )
    }
}

export default toNative<{formData?:FormItemDto}, {}>(CustomInsurancePlanTable)